<template>
    <!-- pages/message/message.wxml -->
    <view class="page">
        <view class="section_2">
            <view class="nav-messagexz">
                <picker class="messagexz_con" @change="msgTypeChange" :value="typeIndex" :range="msgTypes">
                    <text lines="1" class="picker">{{ msgTypes[typeIndex] }}</text>
                    <view class="icon_1"></view>
                </picker>
            </view>
        </view>
        <view>
            <scroll-view
                :scroll-top="scrollTop"
                :scroll-y="true"
                :style="'height:' + scrollHeight + 'px;'"
                class="list"
                @scrolltolower="bindDownLoad"
                @refresherrefresh="refresh"
                @scroll="scroll"
                :refresher-enabled="true"
                :refresher-triggered="loading"
            >
                <view class="navBox" v-for="(item, index) in msgList" :key="index">
                    <text lines="1" class="timetips">{{ item.date }}</text>

                    <view class="group_3">
                        <view class="group_6">
                            <view v-if="item.status == 0" class="section_1"></view>
                        </view>
                        <view class="messagelist">
                            <view class="text-group_3">
                                <view class="text-wrapper_1">
                                    <text lines="1" class="text_5">{{ item.title }}</text>
                                </view>
                                <text lines="1" class="paragraph_1">{{ item.description }}</text>
                                <text lines="1" class="paragraph_1">备注:{{ item.remark }}</text>
                            </view>
                            <view class="btncom">
                                <button v-if="item.type == 1 && item.status == 0" class="button ml">
                                    <text @tap="refuse" :data-id="item.id" lines="1" class="text_18">拒绝</text>
                                </button>
                                <button v-if="item.type == 1 && item.status == 0" class="button bgblue">
                                    <text @tap="agree" :data-id="item.id" lines="1" class="text_19">同意</text>
                                </button>

                                <view v-if="item.type == 1 && item.status == 1" class="button bggree">
                                    <text lines="1" class="text_19">{{ item.applyResult == 0 ? '已拒绝' : '已同意' }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <!-- 加载时文字 -->
            <view class="bomTxt">
                <view v-if="loading">正在加载...</view>
                <view v-if="loaded">已加载全部</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/message/message.js
import api from '../../utils/api';
const app = getApp();
export default {
    data() {
        return {
            msgTypes: ['全部消息', '审核', '系统', '已处理'],
            typeIndex: 0,
            loading: false,
            loaded: false,
            msgList: [],
            msgPage: 0,
            isEndPage: false,
            scrollTop: 100,
            scrollHeight: 0,
            myPage: 0,
            myList: [],
            isEnd: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        let that = this;
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        var that = this;
        var arr = ['.tabbar', '.section_2', '.bomTxt'];
        app.globalData.computeScrollViewHeight(this, arr, 40).then((res) => {
            that.setData({
                scrollHeight: res
            });
        });
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.loadMoreData();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        this.setData({
            msgPage: 0,
            msgList: [],
            isEndPage: false
        }); //重置页码

        if (!this.loading) {
            this.setData({
                loading: true,
                //加载中
                loaded: false //是否加载完所有数据
            });
        }

        this.loadMoreData();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        let that = this;

        if (this.isEndPage == true) {
            console.log('isEnd');
            return;
        }

        if (!that.loading) {
            that.setData({
                loading: true,
                //加载中
                loaded: false //是否加载完所有数据
            });
        } //延时调用接口

        setTimeout(function () {
            that.loadMoreData();
        }, 1000);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        msgTypeChange(e) {
            this.setData({
                typeIndex: e.detail.value
            });
        },

        //同意
        agree(e) {
            var msgId = e.currentTarget.dataset['id'];
            this.requestApply(msgId, 1);
        },

        //拒绝
        refuse(e) {
            var msgId = e.currentTarget.dataset['id'];
            this.requestApply(msgId, 0);
        },

        requestApply(msgId, status) {
            uni.showLoading({
                title: '提交中...'
            });
            var that = this;
            api.post('/rest/api/applyJoinMeeting', {
                msgId: msgId,
                status: status
            })
                .then((res) => {
                    uni.hideLoading();
                    let changeIndex = -1;
                    that.msgList.some((item, index) => {
                        if (item.id == msgId) {
                            changeIndex = index;
                            return true;
                        }
                    });

                    if (changeIndex >= 0) {
                        that.msgList[changeIndex].applyResult = status;
                        that.msgList[changeIndex].status = 1;
                    }
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        },

        loadMoreData() {
            var that = this; //页面累加

            var page = that.msgPage + 1; //请求服务器

            uni.request({
                url: getApp().globalData.serverUrl + '/rest/api/message',
                data: {
                    page: page
                },
                method: 'GET',
                header: {
                    'content-type': 'application/x-www-form-urlencoded',
                    sessionId: getApp().globalData.sessionId
                },
                //请求成功，回调函数
                success: function (res) {
                    var resp = res.data;
                    console.log(resp);

                    if (resp.code != 0) {
                        uni.showToast({
                            title: '刷新失败',
                            icon: 'none',
                            duration: 1000
                        });
                        return;
                    }

                    if (resp.data.length == 0) {
                        that.setData({
                            isEndPage: true
                        });
                    } else {
                        that.setData({
                            //把新加载的数据追加到原有的数组
                            msgList: that.msgList.concat(resp.data),
                            //加载数据
                            msgPage: page
                        });
                    }

                    uni.showToast({
                        title: '刷新成功',
                        icon: 'none',
                        duration: 1000
                    });
                },
                complete: function () {
                    that.setData({
                        loaded: true,
                        //显示 “没有数据” 字样
                        loading: false //隐藏 “正在加载” 字样
                    });
                    uni.hideNavigationBarLoading(); //完成停止加载

                    uni.stopPullDownRefresh(); //停止下拉刷新
                }
            });
        },

        scroll: function (event) {
            //该方法绑定了页面滚动时的事件，这里记录了当前的 position.y 的值,为了请求数据之后把页面定位到这里来。
            this.setData({
                scrollTop: event.detail.scrollTop + 100
            });
        },

        //下拉刷新
        refresh: function (event) {
            this.setData({
                myPage: 0,
                myList: [],
                isEnd: false
            });

            if (!this.loading) {
                this.setData({
                    loading: true,
                    loaded: false
                });
            }

            this.loadMoreData();
        },

        //上拉加载
        bindDownLoad: function () {
            let that = this;

            if (this.isEnd == true) {
                console.log('isEnd');
                return;
            }

            if (!that.loading) {
                that.setData({
                    loading: true,
                    loaded: false
                });
            }

            setTimeout(function () {
                that.loadMoreData();
            }, 1000);
        }
    }
};
</script>
<style>
/* pages/message/message.wxss */
.page {
    background-color: rgba(242, 242, 242, 1);
    position: relative;
    width: 750rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.section_2 {
    padding: 18rpx 0 0rpx 0;
}

.group_5 {
    flex-direction: row;
    display: flex;
    margin: 0 10rpx 0 12rpx;
}

.box_7 {
    width: 34rpx;
    height: 20rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga83613c1476acc127ea3a7c540dccdbcdfadd0b3e1505998598b22c9929a35b0) 100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 6rpx 0 8rpx 0;
}

.text_16 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 34rpx;
    margin-left: 16rpx;
}

.box_8 {
    width: 12rpx;
    height: 20rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga129c8aa13295fa357562c5f63a8491cbaed8fcdb83908bdeffdc631f4812ac3) 0rpx -2rpx no-repeat;
    background-size: 14rpx 24rpx;
    display: flex;
    flex-direction: column;
    margin: 6rpx 0 8rpx 444rpx;
}

.text_17 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin-left: 10rpx;
}

.box_9 {
    width: 54rpx;
    height: 24rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6780ede3147efe01d9430e83c4d959e88ec5cc0955ac49fb18c2be195231592e) 0rpx 0rpx no-repeat;
    background-size: 54rpx 26rpx;
    display: flex;
    flex-direction: column;
    margin: 4rpx 0 6rpx 6rpx;
}

.nav-messagexz {
    padding: 10rpx 522rpx 10rpx 20rpx;
    position: relative;
}
.list {
    margin: 20rpx;
}

.messagexz_con {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 32rpx;
    width: 200rpx;
    float: left;
    display: block;
    padding: 12rpx 24rpx 12rpx 32rpx;
}
.picker {
    display: inline;
    float: left;
}
.text_3 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    font-family: PingFangSC-Regular;
    text-align: right;
    white-space: nowrap;
    line-height: 36rpx;
}

.icon_1 {
    width: 24rpx;
    height: 24rpx;
    margin-top: 20rpx;
    float: left;
    background: url('https://hd.kotom.cn/profile/svg/xl.svg') 100% no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    margin: 14rpx 0 6rpx 20rpx;
}

.timetips {
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 40rpx;
    align-self: center;
    margin-top: 10rpx;
    width: 100%;
    display: block;
}

.group_3 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    align-self: center;
    margin-top: 20rpx;
    width: 686rpx;
    display: flex;
    flex-direction: column;
    padding: 0 0 24rpx 32rpx;
}

.group_6 {
    margin-left: 660rpx;
    height: 24rpx;
    display: flex;
    flex-direction: row;
}

.section_1 {
    background-color: rgba(255, 0, 0, 1);
    border-radius: 100%;
    width: 24rpx;
    height: 24rpx;
    display: flex;
    flex-direction: column;
}

.messagelist {
    margin-right: 32rpx;
}
.text-group_3 {
    float: left;
}
.btncom {
    position: absolute;
    right: 0rpx;
    bottom: 10rpx;
}
.messagelist {
    position: relative;
}

.text-wrapper_1 {
    width: 268rpx;
    height: 44rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 44rpx;
}

.text_5 {
    overflow-wrap: break-word;
    font-size: 32rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 44rpx;
}

.text_6 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    font-family: AppleSDGothicNeo-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 44rpx;
}

.text_7 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 44rpx;
}

.paragraph_1 {
    width: 196rpx;
    height: 80rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 40rpx;
    margin: 12rpx 72rpx 0 0;
}

.messagelist .button {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30rpx;
    border: 1px solid rgba(26, 117, 255, 1);
    padding: 10rpx 20rpx 10rpx 20rpx;
    line-height: normal !important;
    height: 40rpx;
    display: inline-block !important;
    float: right;
}

.messagelist .button.ml {
    margin: 76rpx 0 0 90rpx;
}

.messagelist .button.bgblue {
    background-color: rgba(26, 117, 255, 1);
    color: #fff;
}

.messagelist .button.bggree {
    background-color: rgb(155, 158, 163);
    color: #fff;
    border: 0;
}

.messagelist .button.qdbtn {
    margin: 76rpx 0 0 250rpx;
}

.text_18 {
    overflow-wrap: break-word;
    color: rgba(26, 117, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 40rpx;
}

.button_5 {
    background-color: rgba(26, 117, 255, 1);
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    margin: 76rpx 0 0 16rpx;
    padding: 8rpx 22rpx 8rpx 22rpx;
}

.text_19 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_10 {
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 40rpx;
    align-self: center;
}

.group_4 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 40rpx;
    align-self: center;
    margin-top: 20rpx;
    width: 686rpx;
    display: flex;
    flex-direction: column;
    padding: 0 0 24rpx 32rpx;
}

.box_10 {
    margin-left: 630rpx;
    display: flex;
    flex-direction: row;
}

.box_5 {
    background-color: rgba(255, 0, 0, 1);
    border-radius: 100%;
    width: 24rpx;
    height: 24rpx;
    display: flex;
    flex-direction: column;
}

.box_11 {
    width: 622rpx;
    margin-right: 32rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.text-group_4 {
    display: flex;
    flex-direction: column;
}

.text_11 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 44rpx;
    margin-right: 68rpx;
}

.paragraph_2 {
    width: 196rpx;
    height: 80rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 40rpx;
    margin-top: 12rpx;
}

.button_6 {
    background-color: rgba(26, 117, 255, 1);
    border-radius: 30rpx;
    margin-top: 76rpx;
    display: flex;
    flex-direction: column;
    padding: 8rpx 22rpx 8rpx 22rpx;
}

.text_20 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 40rpx;
}

.tab-bar_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: NaNrpx;
    width: 750rpx;
    border: 1px solid rgba(242, 242, 242, 1);
    margin-top: -2rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    padding: 18rpx 0 16rpx 0;
}

.tab-bar-item_4 {
    display: flex;
    flex-direction: column;
}

.icon_5 {
    width: 48rpx;
    height: 48rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng36c960de6aa71ddb2e7858c2898799819552d2c0622d3aba25e3db8590e324b3) 100% no-repeat;
    background-size: 100% 100%;
    align-self: center;
    display: flex;
    flex-direction: column;
}

.text_21 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 34rpx;
    margin-top: 6rpx;
}

.tab-bar-item_5 {
    display: flex;
    flex-direction: column;
}

.icon_6 {
    width: 48rpx;
    height: 48rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf02bce144ab0986b2dbbd51dcb8f7e44bb7391e5b357a8e8f3a29e14eac7f552) 100% no-repeat;
    background-size: 100% 100%;
    align-self: center;
    display: flex;
    flex-direction: column;
}

.text_22 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 34rpx;
    margin-top: 6rpx;
}

.tab-bar-item_6 {
    display: flex;
    flex-direction: column;
}

.icon_7 {
    width: 48rpx;
    height: 48rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3c53ae001be3d0a0cabd28a3a29f594e50f417aa0f363365de359f4a9238e25c) 100% no-repeat;
    background-size: 100% 100%;
    align-self: center;
    display: flex;
    flex-direction: column;
}

.text_23 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 34rpx;
    margin-top: 6rpx;
}

.messagexz_xl {
    position: absolute;
    left: 40rpx;
    top: 80rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 20rpx 20rpx;
}

.messagexz_xl .messagexz_xl_list {
    width: 196rpx;
    line-height: 40rpx;
    overflow-wrap: break-word;
    display: block;
    text-align: center;
    margin: 0rpx 0px 20rpx 0;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    font-family: PingFangSC-Regular;
    white-space: nowrap;
    line-height: 36rpx;
}

.navBox {
    font-size: 14px;
    border-radius: 36rpx;
}

.lableBox {
    display: inline-block;
    width: 90px;
    text-align: right;
    margin-right: 30rpx;
}

.bomTxt {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: rgb(126, 138, 155);
    padding: 0rpx 0rpx 20rpx 0rpx;
}
</style>
